<script setup>
  
const { detail } = defineProps({
  detail: {
    type: Object,
    required: true,
  }
});

</script>

<template>
  <div class="unitinfo-card flex-column">
    <div class="unit-header flex--center">
      <label>{{ detail.name }}</label>
      <span>新建/改造年份：{{ detail.year }}</span>
    </div>
    <div class="info-grid">
      <div class="unit-info-item flex--center">
        <label>站点地址：</label>
        <p class="ellipsis" style="flex: 1;">
          <span>{{ detail.addr }}</span>
        </p>
      </div>
      <div class="unit-info-item flex--center">
        <label>站点位置：</label>
        <span>{{ detail.wz }}</span>
      </div>
      <div class="unit-info-item flex--center">
        <label>经纬度：</label>
        <span>{{ detail.x }},{{ detail.y }}</span>
      </div>
      <div class="unit-info-item flex--center">
        <label>负责人：</label>
        <span>{{ detail.fzr }}</span>
      </div>
      <div class="unit-info-item flex--center">
        <label>联系电话：</label>
        <span>{{ detail.phone }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.unitinfo-card {
  background-color: #FFFFFF;
  margin: 10px 10px 0;
  padding: 20px 12px;
}
.unit-header {
  font-weight: 400;
  font-size: 12px;
  color: #888888;
  label {
    font-weight: 600;
    font-size: 18px;
    color: #111111;
    position: relative;
    padding-left: 8px;
    margin-right: 8px;
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 3px;
      height: 16px;
      background: linear-gradient( 180deg, #0648D2 0%, #3F92FA 100%);
    }
  }
}
.info-grid {
  margin-top: 16px;
  padding-bottom: 16px;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid #ECECEC;
  .unit-info-item {
    color: #111111;
    label {
      font-weight: 400;
      font-size: 14px;
      color: #888888;
      width: 70px;
      text-align: right;
    }
  }
}
</style>